import { Outlet, Link, useNavigate } from 'react-router-dom';
import { User, ShoppingCart, BookOpen, Trophy, Bell } from 'lucide-react';
import { useState } from 'react';

export function Layout() {
  const navigate = useNavigate();
  const [isLoggedIn, setIsLoggedIn] = useState(!!localStorage.getItem('token'));

  const handleLogout = () => {
    localStorage.removeItem('token');
    setIsLoggedIn(false);
    navigate('/login');
  };

  return (
    <div className="min-h-screen bg-gray-50">
      {/* 导航栏 */}
      <nav className="bg-white shadow-sm border-b">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="flex justify-between h-16">
            <div className="flex items-center space-x-8">
              <Link to="/" className="text-xl font-bold text-blue-600">
                Redis学习平台
              </Link>
              <div className="hidden md:flex space-x-6">
                <Link to="/courses" className="flex items-center space-x-1 text-gray-700 hover:text-blue-600">
                  <BookOpen size={18} />
                  <span>课程</span>
                </Link>
                <Link to="/leaderboard" className="flex items-center space-x-1 text-gray-700 hover:text-blue-600">
                  <Trophy size={18} />
                  <span>排行榜</span>
                </Link>
              </div>
            </div>
            
            <div className="flex items-center space-x-4">
              {isLoggedIn ? (
                <>
                  <Link to="/cart" className="relative text-gray-700 hover:text-blue-600">
                    <ShoppingCart size={20} />
                  </Link>
                  <Link to="/notifications" className="relative text-gray-700 hover:text-blue-600">
                    <Bell size={20} />
                  </Link>
                  <Link to="/profile" className="flex items-center space-x-1 text-gray-700 hover:text-blue-600">
                    <User size={18} />
                    <span>我的</span>
                  </Link>
                  <button
                    onClick={handleLogout}
                    className="text-gray-700 hover:text-blue-600"
                  >
                    退出
                  </button>
                </>
              ) : (
                <div className="space-x-4">
                  <Link to="/login" className="text-gray-700 hover:text-blue-600">
                    登录
                  </Link>
                  <Link to="/register" className="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700">
                    注册
                  </Link>
                </div>
              )}
            </div>
          </div>
        </div>
      </nav>

      {/* 主内容区域 */}
      <main className="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8">
        <Outlet />
      </main>
    </div>
  );
}